<template>
	<view class="layout">
		<view class="navbar" :style="{backgroundColor:bg}">
			<view class="statusBar" :style="{ height: getstatusBarHeight() + 'px' }"></view>
			<view class="titleBar" :style="{ height: getTitleBarHeight() + 'px' }">
				<view class="back" @click="handleBack">
						<view class="icon" v-show="showBack">
							<!-- <svg t="1732689289437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1108" width="16" height="16"><path d="M424.5248 512l313.344-309.7088a58.0352 58.0352 0 0 0 0-82.752 59.6864 59.6864 0 0 0-83.7248 0l-355.2 351.0912a58.0352 58.0352 0 0 0 0 82.7392l355.2 351.104a59.6864 59.6864 0 0 0 83.712 0 58.0352 58.0352 0 0 0 0-82.7648L424.512 512z" :fill="color=='white'?'white':'#18191C'" p-id="1109"></path></svg> -->
							<image style="height:54rpx ;width: 54rpx;" src="/static/icons/left-18191C.png" mode="aspectFill"></image>
						</view>
				</view>
				<view class="title" :style="{color}">{{title}}</view>
				<view class="empty"></view>
			</view>
		</view>
		<nav-bar-height/>
	</view>
	<!-- <div></div> -->
</template>

<script setup>
import { ref } from 'vue';
import { getstatusBarHeight, getTitleBarHeight } from '@/utils/system.js';

const {title,bg,color,showBack} = defineProps({
	title:{
		type:String,
		default:''
	},
	bg:{
		type:String,
		default:'#f2f2f2'
	},
	color:{
		type:String,
		default:'#18191C'
	},
	showBack:{
		type:Boolean,
		default:false
	}
})

const handleBack = ()=>{
	uni.navigateBack()
}
// const showBack = ref(true)
// showBack.value = title=='分类'?false:true

</script>
<style scoped lang="scss">
	.layout{
		.navbar	{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
			
			.titleBar {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.back{
					width: 32px;
					height: 32px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			
				.title {
					font-size: 19px;
					font-weight: 700;
				}
				
				.empty{
					width: 60rpx;
				}
			}
		}
	}

</style>
<style></style>
